<template>
  <div>
    <div style="padding:20px; font-size:20px;">
      <el-row type="flex" justify="space-between">
        <el-col :span="10"> 《{{ $route.query.questionName }} 答卷数据》 </el-col>
        <el-col :span="1">
          <el-button type="success" @click="handleExport">导出</el-button>
        </el-col>
      </el-row>
    </div>

    <!--table 列表-->
    <div class="table-box">
      <el-table
        ref="table"
        stripe
        v-loading="loading"
        :data="tableData"
        :fit="true"
        max-height="490"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" align="center" width="60">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="大鹏号"
          prop="dpAccount"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.dpAccount }}</span>
          </template>
        </el-table-column>

        <el-table-column label="学管师" align="center" width="120">
          <template slot-scope="scope">
            <template v-if="scope.row.learnManagerEmployeeNo || scope.row.learnManagerTrueName">
              <span>{{ scope.row.learnManagerEmployeeNo + scope.row.learnManagerTrueName }}</span>
            </template>
            <template v-else>
              <span>---</span>
            </template>
          </template>
        </el-table-column>

        <el-table-column
          label="联系方式"
          prop="learnManagerStudentPhone"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <span> 学服：{{ scope.row.learnManagerStudentPhone }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="用户昵称"
          prop="nickName"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.nickName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="提交时间"
          prop="subTime"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.subTime }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="您的性别"
          prop="gender"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.gender | genderFilter }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="您的出生日期"
          prop="birthday"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.birthday }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-for="(item, inx) in questionsLabels"
          :key="inx"
          align="center"
          min-width="180"
        >
          <template slot="header">
            <el-tooltip :content="item" placement="top">
              <span>{{ item && item.length > 6 ? item.substr(0, 6) + '...' : item }}</span>
            </el-tooltip>
          </template>

          <template slot-scope="scope">
            <el-tooltip :content="scope.row.questions[inx].answer" placement="top">
              <span>{{ scope.row.questions[inx].answer.length > 20 ? scope.row.questions[inx].answer.substr(0, 20) + '...' : scope.row.questions[inx].answer }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import { answersData, exportAnswersData } from '@/api/survey'

const gender = {
  M: { text: '男' },
  F: { text: '女' },
  S: { text: '保密' }
}

export default {
  msg: '答卷数据',
  data() {
    return {
      total: 0,
      loading: true,
      tableData: [],
      questionsLabels: [],
      searchParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },

  mounted() {
    this.searchList()
  },

  filters: {
    genderFilter(type) {
      return gender[type].text
    }
  },

  methods: {
    // 查询问卷
    searchList() {
      this.loading = true

      const query = this.$route.query
      const params = {
        questionId: query.questionId,
        query: {
          ...this.searchParams,
          collegeId: query.collegeId
        }
      }

      answersData(
        params,
        (res) => {
          this.total = res.total
          if (res.rows.length > 0 && res.rows[0].questions.length > 0) {
            let questionsLabels = res.rows[0].questions.map((item, index) => {
              let label = item.question
              return label
            })
            this.questionsLabels = questionsLabels
          }
          this.tableData = res.rows
          this.loading = false
        },
        (err) => {
          this.loading = false
          this.$message({
            message: err.message,
            type: 'warning'
          })
        }
      )
    },

    /** 导出 */
    handleExport() {
      const query = this.$route.query

      const params = {
        questionId: query.questionId,
        questionName: query.questionName + '答卷数据',
        query: {
          ...this.searchParams,
          collegeId: query.collegeId
        }
      }

      exportAnswersData(params, (err) => {
        this.$message({
          message: err.message,
          type: 'warning'
        })
      })
    },

    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    }
  }
}
</script>
